<template>
  <div class="home-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/" class="mb-6 custom-breadcrumb">
      <el-breadcrumb-item to="/home">首页</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 页面标题与欢迎信息 -->
    <div class="page-header mb-8">
      <h1 class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-[#1d2129]">B站大数据分析平台</h1>
      <p class="text-gray-500 mt-2 text-lg">欢迎使用数据分析平台，请从下方选择需要查看的内容</p>
    </div>

    <!-- 功能导航卡片 - 8个卡片网格布局 -->
    <div class="function-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <!-- 首页卡片 -->
      <el-card class="function-card" @click="$router.push({ name: 'Home' })">
        <div class="flex items-center p-6">
          <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-6">
            <el-icon class="text-2xl"><HomeFilled /></el-icon>
          </div>
          <div>
            <h3 class="text-xl font-semibold mb-2">平台首页</h3>
            <p class="text-gray-500">返回平台主页，查看所有功能模块入口</p>
          </div>
        </div>
      </el-card>

      <!-- 平均观看数据卡片 -->
      <el-card class="function-card" @click="$router.push({ name: 'AvgView' })">
        <div class="flex items-center p-6">
          <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-6">
            <el-icon class="text-2xl"><VideoCamera /></el-icon>
          </div>
          <div>
            <h3 class="text-xl font-semibold mb-2">平均观看</h3>
            <p class="text-gray-500">分析视频平均观看数据与用户行为指标</p>
          </div>
        </div>
      </el-card>

      <!-- 热门视频排行卡片 -->
      <el-card class="function-card" @click="$router.push({ name: 'HotVideoRank' })">
        <div class="flex items-center p-6">
          <div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center text-pink-600 mr-6">
            <el-icon class="text-2xl"><Histogram /></el-icon>
          </div>
          <div>
            <h3 class="text-xl font-semibold mb-2">热门排行</h3>
            <p class="text-gray-500">浏览平台热门视频排行，了解最新趋势</p>
          </div>
        </div>
      </el-card>

      <!-- 月度数据卡片 -->
      <el-card class="function-card" @click="$router.push({ name: 'MonthlyView' })">
        <div class="flex items-center p-6">
          <div class="w-16 h-16 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 mr-6">
            <el-icon class="text-2xl"><TrendCharts /></el-icon>
          </div>
          <div>
            <h3 class="text-xl font-semibold mb-2">月度数据</h3>
            <p class="text-gray-500">查看每月视频数据统计与趋势分析</p>
          </div>
        </div>
      </el-card>

      <!-- 周度数据卡片 -->
      <el-card class="function-card" @click="$router.push({ name: 'WeeklyView' })">
        <div class="flex items-center p-6">
          <div class="w-16 h-16 rounded-full bg-teal-100 flex items-center justify-center text-teal-600 mr-6">
            <el-icon class="text-2xl"><DataLine /></el-icon>
          </div>
          <div>
            <h3 class="text-xl font-semibold mb-2">周度数据</h3>
            <p class="text-gray-500">分析每星期视频数据变化与用户活跃度</p>
          </div>
        </div>
      </el-card>

      <!-- 热门标签卡片 -->
      <el-card class="function-card" @click="$router.push({ name: 'HotTag' })">
        <div class="flex items-center p-6">
          <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-6">
            <el-icon class="text-2xl"><CollectionTag /></el-icon>
          </div>
          <div>
            <h3 class="text-xl font-semibold mb-2">热门标签</h3>
            <p class="text-gray-500">探索平台热门标签分布与关联分析</p>
          </div>
        </div>
      </el-card>

      <!-- UP主分析卡片 -->
      <el-card class="function-card" @click="$router.push({ name: 'Up' })">
        <div class="flex items-center p-6">
          <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center text-red-600 mr-6">
            <el-icon class="text-2xl"><UserFilled /></el-icon>
          </div>
          <div>
            <h3 class="text-xl font-semibold mb-2">UP主分析</h3>
            <p class="text-gray-500">查看UP主数据表现与数据分析</p>
          </div>
        </div>
      </el-card>

      <!-- 时间分析卡片 -->
      <el-card class="function-card" @click="$router.push({ name: 'TimeAnalysis' })">
        <div class="flex items-center p-6">
          <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-6">
            <el-icon class="text-2xl"><DataAnalysis /></el-icon>
          </div>
          <div>
            <h3 class="text-xl font-semibold mb-2">时长分析</h3>
            <p class="text-gray-500">分析视频数据随时长变化的趋势与规律</p>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 快速导航提示 -->
    <div class="mt-10 p-4 bg-blue-50 rounded-lg border border-blue-100">
      <div class="flex items-start">
        <el-icon class="text-blue-500 mt-1 mr-3"><InfoFilled /></el-icon>
        <p class="text-gray-600">
          点击任意卡片可直接进入对应的数据模块，使用左侧导航栏也可以访问所有功能模块，包括UP主数据分析、视频数据分析和热门排行等内容。
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  HomeFilled,
  UserFilled,
  VideoCamera,
  Histogram,
  TrendCharts,
  CollectionTag,
  DataAnalysis,
  DataLine,
} from '@element-plus/icons-vue'
</script>

<!-- 带作用域的组件样式 -->
<style scoped>
.home-container {
  padding: 24px;
}

.page-header {
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f2f5;
}

.function-grid {
  margin-top: 20px;
}

.function-card {
  border-radius: 10px;
  border: 1px solid #ebeef5;
  transition: all 0.3s ease;
  cursor: pointer;
}

.function-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.custom-breadcrumb {
  margin-bottom: 24px;
}
</style>

<!-- 全局样式，用于定制Element组件 -->
<style>
/* 面包屑样式 */
.custom-breadcrumb .el-breadcrumb__inner.is-link {
  cursor: pointer !important;
  text-decoration: underline;
  color: #fb7299 !important;
}

.custom-breadcrumb .el-breadcrumb__inner.is-link:hover {
  color: #f53f3f !important;
}

/* 卡片样式增强 */
.function-card .el-card__body {
  padding: 0;
}
</style>
